/**
 * 连接系统测试演示
 */
import { CanvasManager } from './editor/CanvasManager.js';
import { Resistor, Capacitor, VoltageSource } from './circuit-elements.js';

/**
 * 初始化连接系统演示
 */
export function initConnectionDemo(containerId: string = 'app') {
    const container = document.getElementById(containerId);
    if (!container) {
        console.error(`Container with id '${containerId}' not found`);
        return;
    }

    // 创建画布管理器
    const canvasManager = new CanvasManager(container);

    // 添加一些测试元件
    const resistor1 = new Resistor({
        id: 'resistor1',
        position: { x: 100, y: 100 },
        resistance: 1000
    });

    const resistor2 = new Resistor({
        id: 'resistor2', 
        position: { x: 300, y: 100 },
        resistance: 2000
    });

    const voltageSource = new VoltageSource({
        id: 'voltage1',
        position: { x: 200, y: 200 },
        voltage: 5
    });

    const capacitor = new Capacitor({
        id: 'capacitor1',
        position: { x: 200, y: 300 },
        capacitance: 100
    });

    // 添加元件到画布
    canvasManager.addElement(resistor1);
    canvasManager.addElement(resistor2);
    canvasManager.addElement(voltageSource);
    canvasManager.addElement(capacitor);

    // 添加使用说明
    const instructions = document.createElement('div');
    instructions.innerHTML = `
        <h3>连接系统演示</h3>
        <p><strong>操作说明：</strong></p>
        <ul>
            <li>点击元件的引脚（小圆点）开始连接</li>
            <li>拖拽鼠标到另一个引脚上完成连接</li>
            <li>绿色高亮表示有效连接目标</li>
            <li>红色表示无效连接目标</li>
            <li>点击空白区域取消连接</li>
            <li>仍然可以拖动元件本体进行移动</li>
        </ul>
        <p><strong>提示：</strong>引脚会根据状态改变颜色和大小，提供视觉反馈。</p>
    `;
    instructions.style.cssText = `
        margin-top: 20px;
        padding: 15px;
        background-color: #f0f8ff;
        border-radius: 5px;
        border-left: 4px solid #007acc;
    `;
    
    container.appendChild(instructions);

    return canvasManager;
}

/**
 * 自动初始化（如果在浏览器环境中）
 */
if (typeof window !== 'undefined') {
    // 等待DOM加载完成
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', () => {
            initConnectionDemo();
        });
    } else {
        initConnectionDemo();
    }
}